<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="description" content="A fully featured admin theme which can be used to build CRM, CMS, etc.">
    <meta name="author" content="Coderthemes">

    <link rel="stylesheet" href="/adminstatic/base/base.css"/>
    <script src="/adminstatic/base/baseCss.js"></script>
    <style type="text/css">
        html, body {
            background: #fff;
        }
    </style>
</head>

<body class="fixed-left">
<!-- Begin page -->
<div id="wrapper" style="overflow: auto;">
    <div class="container">
        <div class="panel panel-default" style="box-shadow: none">
            <div class="panel-body">
                <!--                <input type="hidden" name="id" value="${carouselImage.id!}"/>-->
                <div class="layui-form" lay-filter="">
                    <div class="layui-form-item">
                        <div class="layui-input-inline layui-btn-container" style="width: auto;">
                            <button type="button" class="layui-btn layui-btn-primary" id="LAY_avatarUpload">
                                <i class="layui-icon">&#xe67c;</i>上传图片
                            </button>
                        </div>
                    </div>

                    <div class="layui-input-inline" id="avatar-preview">
<!--                        <div class="img-item">-->
<!--                            <img style="width: 100%;height: 100%;" src="https://sentsin.gitee.io/res/images/demo/layer.png">-->
<!--                            <div class="img-tag">查看图片</div>-->
<!--                        </div>-->
                    </div>
                </div>
            </div>
        </div>
    </div> <!-- container -->

</div>
<!-- END wrapper -->

<script src="/adminstatic/base/base.js"></script>
<script type="text/javascript">
    layer.photos({
        photos: '#avatar-preview'
        , anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
    });
    var num = 5
    var id = $("input[name='id']").val();
    if (vaildeParam(id)) {
        num = 1
    }

    //上传图片
    layui.use('upload', function () {
        var upload = layui.upload;
        //执行实例
        var uploadInst = upload.render({
            elem: '#LAY_avatarUpload' //绑定元素
            , multiple: true
            // , size: 2048 //文件大小限制
            , number: num //文件数量限制
            , accept: 'file' //文件类型限制
            // , acceptMime: 'image/*' //选择窗口属性
            , url: '/admin/upload/addFile' //上传接口
            , before: function (obj) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                layer.msg('上传中', {icon: 16, time: 0, shade: 0.01});
                obj.preview(function (index, file, result) {
                    // var files = obj.pushFile();
                    console.log(file)
                });
            }
            , done: function (res, index, upload) {
                layer.closeAll('loading');
                if (res.code === 0) {
                    layer.msg(res.msg, {icon: 1});
                    console.log(res.data)
                    if (vaildeParam(id)) {
                        $(".img-item img").attr("src", res.data)
                    } else {
                        $('#avatar-preview').append('<div class="img-item">' +
                            '<img style="width: 100%;height: 100%;" src="'+res.data +'"> ' +
                            '<div class="img-tag">查看图片</div> ' +
                            '<div class="delete-item" onclick="deleteImg(this)" data-name="' + res.name + '"> ' +
                            '<i class="layui-icon layui-icon-close-fill"></i> ' +
                            '</div> ' +
                            '</div>')
                    }

                    layer.photos({
                        photos: '#avatar-preview'
                        , anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
                    });

                }

                //获取当前触发上传的元素，一般用于 elem 绑定 class 的情况，注意：此乃 layui 2.1.0 新增
                var item = this.item;
                //文件保存失败
                //do something
            }
            , error: function () {
                layer.closeAll('loading');
                //请求异常回调
                layer.msg("上传失败，请重试", {icon: 2});
            }

        });
    });

    function deleteImg(that) {
        var $this = $(that);
        var name = $this[0].dataset.name;
        var api = '/admin/upload/deleteFile';
        var data = {
            "name": name,
        }
        //删除父元素
        postJSON(api, data, function (res) {
            if ('success' === res.type) {
                $this[0].parentNode.remove()
                layer.msg(res.content, {icon: 1});
            } else {
                layer.msg(res.content, {icon: 5});
            }
        })

    }


    $("#submitBtn").click(function () {
        var imgArr = [];
        $(".img-item img").each(function () {
            imgArr.push($(this).attr('src'));
        });


        var api = '${base}/carouselImage/update';
        var data = {
            "id": id,
            "imgArr": JSON.stringify(imgArr)
        }

        postJSON(api, data, function (res) {
            cleanSuccess(res)
        })

    })
</script>
</body>
</html>